<template>
  <div class="home">
    <p class="title">Home</p>
		<p>{{ $t('title') }}</p>
		<p>{{ time | timeFormat }}</p>
		<p v-color="'orange'">{{ str | random }}</p>
		<p v-color:red>{{ str | random }}</p>
		<p v-formatNumber="'-'">12345678945613</p>
		<p>{{ 12345678945613 | formatNumber('*') }}</p>
		<el-input v-focus style="width: 200px;"></el-input>
		<Page></Page>
		<p><el-button type="primary" @click="jump">按钮</el-button></p>
		<!-- 切换语言 -->
		<el-dropdown @command="commandChange">
		  <el-button type="primary">
		    {{ lang[locale] }}<i class="el-icon-arrow-down el-icon--right"></i>
		  </el-button>
		  <el-dropdown-menu slot="dropdown">
		    <el-dropdown-item command="zh">简体中文</el-dropdown-item>
		    <el-dropdown-item command="en">English</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'Home',
	data() {
		return {
			lang: {
				zh: '简体中文',
				en: 'English'
			},
			locale: 'zh',
			local: '1',
			time: 1223864813433,
			str: 'abcd',
		}
	},
	mounted() {
		this.say();
	},
	methods: {
		commandChange(val) {
			// console.log(val)
			this.locale = val;
			this.$i18n.locale = val;
		},
		jump() {
			this.$router.push({
				path: '/about',
				query: {
					item: JSON.stringify({
						a: 1,
						b: 2
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.home {
	.title {
		color: $main-color;
	}
}
</style>